import { getGlobalData, setGlobalData } from "@src/utils";
import {  Slider, View } from "@tarojs/components";
import Taro, { useDidHide, useDidShow } from "@tarojs/taro";
import React, { useCallback, useRef, useEffect, useState } from "react";
import Video from "react-native-video";
import "./index.scss";

let videoContext;
export default function CustomVideo(props) {
    const { id, src, play, style, fullScreen } = props;
    const [paused, setPaused] = useState(true);
    const [loadingShow, setLoadingShow] = useState(false);
    const [muted,setMuted] = useState(!fullScreen);
    const [currentTime,setCurrentTime] = useState(0);
    const [duration,setDuration] = useState(0);
    const isChanging = useRef<any>(null);
    const playVideo = () => {
        setPaused(false);
    };

    useDidHide(() => {
        setPaused(true);
    });

    useDidShow(() => {
        setPaused(!play);
    });

    useEffect(() => {
        videoContext?.seek(0);
        console.log(play, "playUseEffect");
        setPaused(!play);
    }, [play]);

    const handleOnLoad = useCallback((event) => {
        setDuration(event.duration);
        setLoadingShow(false);
    }, []);
    const handleOnLoadStart = useCallback(() => {
        setLoadingShow(true);
    }, []);

    const handleOnBuffer = useCallback((event) => {
        console.log(event,"isBuffering");
        setLoadingShow(event.isBuffering);
    }, []);

    const handleOnProgress = useCallback((event)=>{
        if(isChanging.current) return;
        const { currentTime } = event;
        setCurrentTime(currentTime);
    },[]);

    const handleSliderChange = useCallback((event)=>{
        const { detail } = event;
        videoContext.seek(detail.value);
        isChanging.current = false;
    },[]);
    const handleSliderChanging = useCallback((event)=>{
       console.log(event);
       isChanging.current = true;
    },[]);

    return (<View style={{ width: "100%", minHeight: 250, backgroundColor: "black" ,...style }}>
        <Video source={{ uri: src }} ref={(ref) => { videoContext = ref; }} muted={muted} paused={paused} style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }} repeat onLoad={handleOnLoad} onLoadStart={handleOnLoadStart} onBuffer={handleOnBuffer} onProgress={handleOnProgress} />
        {paused ? <View className="customVideo__playBtn" onClick={playVideo}>playBtn</View> : loadingShow ? <View className="customVideo__loading" >loading...</View> : null}
        {!fullScreen ? <View className="customVideo__openSound" onClick={() => {
            setMuted(!muted);
        }}
        > 开启音量</View> : null}
        {
            fullScreen ? <View className="customVideo__sliderWrapper">
                <Slider className="customVideo__slider" min={0} max={duration}  value={currentTime} activeColor="red" backgroundColor="red" blockSize={12} activeColor="green" onChange={handleSliderChange} onChanging={handleSliderChanging} showValue={false} />
            </View> : null
        }
        
    </View>);

}